<template>
	<div class="main">
        <div ref="stickyHeader">
		    <navTop></navTop>
            <!-- <div class="contentboxset">
				<div class="breadBox">
					<el-breadcrumb separator="/">
					<el-breadcrumb-item :to="{ path: '/homework' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item>作业管理</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
			</div> -->
			<div style="background:#F4F7FD;padding-top:14px;">
				<div class="searchlist">
					<div style="display: flex;align-items: center;">
                        <!-- <span>选择地区：</span>
                        <v-distpicker :province="selected.province" 
							:city="selected.city"
							@selected="onSelected"
							:only-province="true" >
						</v-distpicker>
                        <span>年级：</span>
						<el-select v-model="gradeId" placeholder="全部" @focus="gradelistfocus" @change="gradelistchange" clearable>
							<el-option
							  key="0"
							  label="全部"
							  value="0">
							</el-option>
						    <el-option
						      v-for="item in gradelist"
						      :key="item"
						      :label="item"
						      :value="item">
						    </el-option>
						</el-select> -->
						<span>时间：</span>
						<div class="inputBox" style="width:324px;margin-right:14px;position:relative">
							<el-date-picker
							@change="datapickchange"
							style="width:324px"
							  v-model="examdate"
							  type="daterange"
							  range-separator="至"
							  start-placeholder="开始日期"
							  end-placeholder="结束日期"
							  :default-time="['00:00:00', '23:59:59']">
							</el-date-picker>
						</div>
                        <span>搜索：</span>
                        <div class="inputBox" style="width:200px;margin-right:14px;position:relative">
                            <el-input v-model="examobj.itemname" placeholder="请输入内容" @change="inputitemname" clearable></el-input>
                        </div>
					</div>
                    <div>
                        <el-button type="primary" @click="addExam(0)">创建项目</el-button>
						<el-button type="primary" @click="addExamcopy">复用项目</el-button>
                    </div>
				</div>
			</div>
        </div>
		<div class="contentMain">
			<div class="contentMainlist">
				<div class="cmlLeft" style="position: relative;">
					<empty v-if="examlist&&examlist.length==0"></empty>
					<ul v-else>
						<li v-for="item in examlist">
							<div>
								<h3>{{item.navsname}}</h3>
								<p>
									<span class="blue">联考</span>
									<span :class="item.type==0?'yellow':item.type==1?'blue':'green'">{{item.type==0?'考试信息':item.type==1?'在线阅卷':'成绩分析'}}</span>
								</p>
								<div class="examInfo">
									<b style="display: flex;align-items: center;">
										<i>年级：{{item.gradename}}</i>
										<el-divider direction="vertical"></el-divider>
										<i>考试模式：{{ item.navtype3==0?'老高考':item.navtype3==1?'新高考3+3':item.navtype3==2?'新高考3+1+2':'不区分' }}</i>
										<el-divider direction="vertical"></el-divider>
										<i>考试日期：{{item.maintenancegte?item.maintenancegte:'--'}}</i>
									</b>
								</div>
							</div>
							<div class="tyboxset">
								<em @click="examinfolist(item)">模板管理</em>
							</div>
						</li>
					</ul>
					
				</div>
			</div>
		</div>
		<div class="examfooter">
			<div class="examFootercontent">
				<div>
					<span class="totaldata">共<i>{{total?total:0}}</i>条数据</span>
				</div>
				<div>
					<el-pagination
						background
					      @current-change="handleCurrentChange"
						  :page-sizes="[20, 50,100]"
						  @size-change="handleSizeChange"
						  :page-size="examobj.pagesize"
						  layout="sizes, prev, pager, next"
					      :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
		<!-- 创建考试  v-if="addExamIshow"-->
		<examEdite v-if="addExamIshow" @closedExam="closedExam" @addexamclick="addexamclick" :addexamtype="addexamtype"></examEdite>
		<!-- 创建复用考试 -->
		<examCopy v-if="examCopyIshow" @copyexamclick="copyexamclick" :type="0"></examCopy>
	</div>
</template>

<script>
	import navTop from "../../components/head.vue"
    import VDistpicker from 'v-distpicker'
	import empty from "../../components/empty.vue"
	import examEdite from '../../components/exditexam.vue'
	import examCopy from '../../components/copyexam.vue'
	import {getExamList} from '../../api/api.js'
	import dayjs from 'dayjs';
	export default{
		data(){
			return{
				gradelist:['高一','高二','高三'],
				gradeId:'',
                examdate:'',
                name:'',
                selected: {
                    province: '',
                    city: '',
                    area: ''
                },
				examlist:[],
				examobj:{
					page:1,
					pagesize:20,
					itemname:'',
					startdate:'',
					enddate:''
				},
				addExamIshow:false,
				examCopyIshow:false,
				gradelist:[],
				total:0,
				addexamtype:1
			}
		},
		mounted() {
			this.screenWidth = document.body.clientWidth
			this.type=this.$route.query.type
			this.nav5id = this.$route.query.navid
			this.title = this.$route.query.title
			this.examclicklist()//考试列表
		},
		methods:{
			routerlink(url){
				this.$router.push(url)
			},
            gradelistfocus(){
                
            },
			gradelistchange(){

			},
			onSelected(){
				this.createExamForm.district = data.province.value;
			},
			datapickchange(){
			    if (this.examdate && this.examdate.length === 2) {
					this.examobj.startdate = dayjs(this.examdate[0]).format('YYYY-MM-DD');
					this.examobj.enddate = dayjs(this.examdate[1]).format('YYYY-MM-DD');
				} else {
					this.examobj.startdate = null
					this.examobj.enddate = null
				}
				this.examclicklist()
			},
			closedExam() {
				this.addExamIshow = false
			},
			// 新建考试
			addExam(e){
				this.addexamtype = e
				this.addExamIshow = true
			},
			addexamclick(data){
				//console.info(data)
				this.addExamIshow=data
				this.examclicklist()
			},
			addExamcopy(){
				this.examCopyIshow = true
			},
			copyexamclick(data){
				this.examCopyIshow = data
				this.examclicklist()
			},
			// 处理每页条数变化
			handleSizeChange(val){
				this.examobj.pagesize = val
				 this.examclicklist()
			},
			// 处理当前页码变化
			handleCurrentChange(val){
				this.examobj.page = val
				 this.examclicklist()
			},
			//获取列表
			examclicklist(){
			    getExamList(this.examobj).then(res=>{
			        console.info(res)
					if(res.code==0){
						this.examlist = res.obj.results
						this.total = res.obj.count
					}else{
						this.$message.error(res.msg)
					}
			    })
			},
			// 按名字搜所
			inputitemname(val){
				this.examobj.itemname = val
				this.examclicklist()
			},
			// 跳转详情
			examinfolist(con){
				this.$router.push({path:'/mainexam/textstructure'})
				sessionStorage.setItem('examContent',JSON.stringify(con))
			}
		},
		components:{navTop,VDistpicker,empty,examEdite,examCopy}
	}
</script>

<style scoped>
.main{
		min-width: 1440px;
		background: #F4F7FD;
		min-height: 100vh;
	}
	.contentboxset{
		background: #fff;
		height:32px;
		border-top:solid 2px #F4F7FD
	}
	.breadBox{
		width:1440px;
		margin:0 auto;
		min-width: 1200px;
		line-height: 32px;
	}
	.el-breadcrumb{
		width:auto;
		margin:0 auto;
		line-height:30px;
		font-size:14px;
	}
	.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
		color:#B3B8C2
	}
	.searchlist{
		width:1440px;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 10px;
		padding:15px 40px 15px 0;
        display: flex;
		align-items: center;
		margin:0 auto ;
        justify-content: space-between;
	}
	.searchlist span{
		font-size:16px;
		color:#557292;
		margin-left:24px;
	}
	.searchlist .el-select{
		width:124px;
		margin-right:16x;
	}
	.searchlist >>> .el-input__inner{
		border-radius: 10px;
		height:35px;
		font-size:16px;
		line-height:35px;
		border: 1px solid #D8E4F0;
	}
	.searchlist >>> .el-range__inner{
		border-radius: 10px;
		height:35px;
		font-size:16px;
		line-height:35px
	}
	.searchlist >>> .el-range-editor.el-input__inner{
		padding:0 10px;
	}
	.searchlist >>> .el-date-editor .el-range__icon{
		font-size:16px;
		line-height:35px;
		display: none;
	}
	.searchlist >>> .el-date-editor .el-range-input{
		font-size:16px;
		line-height:35px;
	}
	.searchlist >>> .el-date-editor .el-range-separator{
		font-size:16px;
		line-height:30px;
	}
	.searchlist >>> .el-input__icon{
		line-height:28px;
		font-size:16px;
		color:#557292;
		font-weight:bold;
		font-size:14px;
	}
	.searchlist b{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
		text-align: center;
		line-height:34px;
		cursor: pointer;
	}
	.searchlist >>> .distpicker-address-wrapper select{
		border-radius: 10px;
    	height: 35px;
		font-size: 16px;
		line-height: 35px;
		border: 1px solid #D8E4F0;
		color:#606266;
		padding:0 10px;
	}
	.contentMain{
		width:auto;
		margin:0 auto;
		padding-bottom:70px;
		position:relative
	}
	.contentMainlist{
		width:1440px;
		display: flex;
		justify-content: space-between;
		position:relative;
		margin:15px auto 0;
	}
	.cmlLeft{
		width:100%;
	}
	.clrtitle{
		font-size:16px;
		color:#2A303B;
		position: relative;
		display: block;
		height:40px;
	}
	.clrtitle::before{
		content:'';
		position: absolute;
		width: 64px;
		height: 6px;
		background: linear-gradient( 90deg, #527BFF 0%, #FFFFFF 100%);
		border-radius: 3px;
		left:0;
		bottom:0;
		z-index:1;
		opacity: 0.5;
	}
	.clrtitle i{
		position: absolute;
		left:0;
		bottom:0;
		font-style: normal;
		z-index:2
	}
	.clrdownlost li{
		display: flex;
		justify-content: space-between;
		padding-left:28px;
		font-size:14px;
		padding:6px 0 6px 35px;
		margin-top:14px;
	}
	.boxcentercontact{
		display: flex;
		justify-content:space-between;
		margin-top:14px;
	}
	.boxcentercontact em{
		box-sizing: border-box;
		display: inline-block;
		width: 145px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #DEE1E7;
		text-align: left;
		font-size:14px;
		color:#557292;
		padding-left:36px;
		line-height:34px;
	}
	.cmlLeft ul li{
		display: flex;
		justify-content: space-between;
		background:#fff;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		margin-bottom:15px;
		align-items: center;
		padding:24px;
	}
	.cmlLeft ul li:last-child{
		margin-bottom:0;
	}
	.cmlLeft ul li h3{
        display: flex;
		align-items: center;
		font-size:18px;
		color: #2A303B;
        padding-bottom:0px;
	}
    .cmlLeft ul li h3 span.blue{
		background: rgba(41,92,255,0.04);
		border-radius: 6px;
		border: 1px solid #295CFF;
		color:#295CFF;
        display: inline-block;
		height:24px;
		line-height:24px;
		font-size:12px;
        padding:0 10px;
        margin-right:8px;
	}
	.cmlLeft ul li p{
		display: flex;
		padding:10px 0;
	}
	.cmlLeft ul li p span{
		display: inline-block;
		height:24px;
		line-height:24px;
		font-size:12px;
		margin-right:10px;
		padding:0 10px;
	}
	.cmlLeft ul li p span.blue{
		background: rgba(41,92,255,0.04);
		border-radius: 6px;
		border: 1px solid #295CFF;
		color:#295CFF;
	}
	.cmlLeft ul li p span.green{
		background: rgba(40,143,65,0.04);
		border-radius: 6px;
		border: 1px solid #288F41;
		color:#288F41;
	}
	.cmlLeft ul li p span.yellow{
		background: rgba(227, 115, 24,0.04);
		border-radius: 6px;
		border: 1px solid rgba(227, 115, 24,1);
		color:rgba(227, 115, 24,1);;
	}
	.examInfo{
		display: flex;
		align-items: center;
	}
	.examInfo b{
		font-weight: normal;
		font-size:14px;
		color:#8E96A4;
		position: relative;
		padding-right:14px;
		margin-right:14px;
	}
	.examInfo b i{
		font-style:normal;
		color:#8E96A4
	}
	.examInfo b::after{
		content:'';
		width: 1px;
		height: 8px;
		background:#DEE1E7;
		position:absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
	}
	.examInfo b:last-child::after{
		content:'';
		width: 1px;
		height: 8px;
		background:#fff;
		position:absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
	}
	.examInfo em{
		color:#8E96A4
	}
	.boxinfostyle{
		display: flex;
		color:#8E96A4;
		font-size:14px;
		margin-top:10px;
	}
	.boxinfostyle i{
		font-style: normal;
		padding-right:10px;
		margin-right:10px;
		color:#333
	}
	.boxinfostyle i::after{
		content:'';
		width: 1px;
		height: 8px;
		background:#DEE1E7;
		position:absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
	}
	.boxinfostyle i:last-child::after{
		content:'';
		width: 1px;
		height: 8px;
		background:#fff;
		position:absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
	}
	.tyboxset em{
		display:block;
		width: 104px;
		height: 34px;
		border-radius: 10px;
		line-height:34px;
		font-size:14px;
		text-align: center;
		cursor: pointer;
	}
	.tyboxset em:first-child{
		background: #288F41;
		color:#fff;
	}
	.examfooter{
		width:100%;
		height:54px;
		background: rgba(255,255,255,0.9);
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		position:fixed;
		left:0;
		bottom:0;
	}
	.examFootercontent{
		width:1440px;padding:0 40px;
		margin:0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.examFootercontent .totaldata{
		font-size:14px;
	}
	.examFootercontent .totaldata i{
		display: inline-block;
		color:#295CFF;
		font-style: normal;
		line-height:54px;
		padding:0 3px;
	}
	.ewmbox{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top:14px;
	}
	.ewmbox li{
		box-sizing: border-box;
		width: 145px;
		height: 175px;
		background: #F2F6FB;
		border-radius: 20px;
		text-align: center;
		padding-top:14px;
	}
	.ewmbox li i{
		display: block;
		font-size:14px;
		color:#2A303B;
		font-style: normal;
		padding-top:5px;
	}
	.ewmbox li img{
		width:121px;
		height:121px;
		border-radius:10px
	}
	.boxbslmedu{
		font-size:12px;
		color:#8E96A4;
		text-align: center;
		padding-top:44px;
		line-height:1.8
	}
	.inputBox{
		width: 200px;
	}	
	.tableContent{
		border-radius: 10px;
		height:300px;
		overflow-y: auto;
		overflow-x: hidden;
	}
	.tableContent::-webkit-scrollbar {
		 width:6px;
		background-color: #eee;
		border-radius:10px;
	}
	.tableContent::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.tableContent::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	}
	.tableContent table{
		border-radius: 10px;
		border: 1px solid rgba(216,228,240,0.5);
	}
	.tableContent table tr th{
		font-size:14px;
		font-weight:normal;
		background:#E8F0FA;
		height:42px;
	}
	.tableContent table tr th:first-child{
		border-radius: 8px 0 0 0;
	}
	.tableContent table tr th:last-child{
		border-radius: 0 8px 0 0;
	}
	.tableContent table tr td{
		height:42px;
		text-align: center;
		font-size:14px;
		border-right:solid 1px rgba(216,228,240,0.34);
	}
	.tableContent table tr td:last-child{
		border-right:none;
	}
	.tableContent table tr td i{
		display: block;
		font-style: normal;
		font-size:12px;
		color:#999
	}
	.tableContent table tr td em{
		display: block;
	}
	.tableContent table tr td span{
		position:relative;
		display: inline-block;
		cursor: pointer;
	}
	.tableContent table tr td span em{
		font-size:12px;
		font-style:normal;
	}
	.tableContent table tr td span::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-4px;
		transform: translateX(-50%);
		background:#000;
	}
	.tableContent table tr td span.green{
		color:#288F41
	}
	.tableContent table tr td span.green::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-4px;
		transform: translateX(-50%);
		background:#288F41;
	}
	.tableContent table tr td span.blue{
		color:#295CFF
	}
	.tableContent table tr td span.blue::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-4px;
		transform: translateX(-50%);
		background:#295CFF;
	}
	.tableContent table tr td span.red{
		color:#EC555A
	}
	.tableContent table tr td span.red::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-4px;
		transform: translateX(-50%);
		background:#EC555A;
	}
	.tableContent table tr td span.gray{
		color:#D8E4F0
	}
	.tableContent table tr td span.gray::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-4px;
		transform: translateX(-50%);
		background:#D8E4F0;
	}
	.tableContent table tr:nth-child(3n){
		background:#FAFAFB
	}
	.el-message-box__status.el-icon-warning{
		color:#ec555a !important;
	}
	.examFootercontent >>> .el-pagination.is-background .el-pager li:not(.disabled).active{
		background-color:#295CFF !important;
	}
	.header {
	  background-color: #f8f8f8;
	  text-align: center;
	  transition: all 0.3s ease; /* 添加过渡效果 */
	}
	
	.sticky {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  z-index: 100;
	  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 吸顶时添加阴影 */
	}
	.breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
		font-weight:normal
	}
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
		font-weight:bold
	}
	.searchbox{
		display: flex;
		align-items: center;
		margin-top:10px;
		position:relative;
		width:404px;
	}
	.searchbox span{
		display: block;
		width:60px;
	}
	.searchbox >>> .el-input__inner	{
		width:324px;
	}
	.searchbox i{
		display: block;
		position: absolute;
		right:10px;
		top:0;
		width:34px;
		height:34px;
		line-height:34px;
		border-left:solid 1px  #DCDFE6;
		text-align: center;
		color:#606266
	}
	.searchlist >>> .el-date-editor .el-input__prefix {
		right: 5px;
		left: auto;
		order: 2;
	}
	.searchlist >>> .el-date-editor .el-input__icon {
		line-height: 28px;
	}
	.searchlist >>> .el-date-editor .el-input__inner {
		padding-left: 15px;
		padding-right: 30px;
	}
	.buttonboxsm{
		display: inline-block;
		width: 146px;
		height: 34px;
		background: rgba(236, 85, 90, 0.1);
		border-radius: 10px;
		color:rgba(236, 85, 90, 1);
		line-height:34px;
		padding:0 10px;
		margin-left:14px;
		cursor: pointer;
	}
	.dataicon{
		position:absolute;
		right:0;
		width:34px;
		height:35px;
		border-left:solid 1px #D8E4F0;
		top:0;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}
	.dataicon img{
		width:14px;
		height:14px;
	}
</style>